<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TARA报告</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: start; align-items: center; margin-bottom: 8px; margin-top: 8px; }
        /* 自动折行样式 */
        .auto-wrap {
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
            word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
            max-width: 100%; /* 确保内容不会溢出单元格 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <button class="layui-btn layui-btn-normal" id="filterButton">数据刷新</button>
            <button class="layui-btn layui-btn-normal" id="exportExcel">导出TARA表</button>
            <button class="layui-btn layui-btn-normal" id="exportWord">导出TARA报告</button>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="riskAssessmentTable" lay-filter="riskAssessmentTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;

            function renderTable(filter = false) {
                // 计算表格的高度
                var windowHeight = window.innerHeight;
                var tableHeight = windowHeight - 80; // 减去其他元素的高度和一些边距

                table.render({
                    elem: '#riskAssessmentTable',
                    url: '/getRiskAssessmentEcu?filter=' + filter,
                    height: tableHeight,
                    page: true,
                    limit: 50,
                    limits: [50, 100, 500],
                    cols: [[
                        {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                        {type: 'numbers', title: '序号', width: 60, align: 'center', fixed: 'left'},
                        {field: 'item_number', title: 'ITEM编号', width: 95, align: 'center'},
                        {field: 'item', title: 'ITEM', width: 110, align: 'center'},
                        {field: 'ecu', title: 'ECU', width: 70, align: 'center'},
                        {field: 'ecu_feature', title: '特性', width: 120, align: 'center'},
                        {field: 'asset_code', title: '资产编码', width: 200, align: 'center'},
                        {field: 'security_attr', title: '安全属性', width: 110, align: 'center'},
                        {field: 'thread_type', title: '威胁类型', width: 110, align: 'center'},
                        {field: 'thread_scenario_number', title: '威胁场景编号', width: 150, align: 'center'},
                        {field: 'thread_scenario', title: '威胁场景', width: 200, align: 'left'},
                        {field: 'damage_scenario_desc', title: '损害场景描述', width: 330, align: 'left', templet: function(d) {
                            return '<div class="auto-wrap">' + d.damage_scenario_desc + '</div>';
                        }},
                        {field: 'risk_code', title: '风险编码', width: 210, align: 'center'},
                        {field: 'affect_value', title: '影响值', width: 100, align: 'center'},
                        {field: 'affect_level', title: '影响等级', width: 120, align: 'center'},
                        {field: 'attack_level', title: '攻击等级', width: 120, align: 'center'},
                        {field: 'risk_level', title: '风险等级', width: 130, align: 'center', sort: true},
                        {field: 'cybersecurity_goal_name', title: '安全目标', width: 200, align: 'center', sort: true},
                        {field: 'dr_code', title: '安全需求编号', width: 160, align: 'center', sort: true},
                        {field: 'dr_name', title: '安全需求名称', width: 210, align: 'center', sort: true},

                        {field: 'risk_treatment_desc', title: '风险处置描述', width: 200, align: 'left'},
                        {field: 'r_risk_est_r_level', title: '残余风险等级', width: 140, align: 'left'},
                        {field: 'r_risk_treatment_strategy', title: '残余风险评估说明', width: 140, align: 'left'}
                    ]],
                    done: function (res, curr, count) {
                        console.log('表格渲染完成');
                    }
                });
            }

            // 初始化渲染表格
            renderTable(false);

            // 过滤按钮点击事件
            $('#filterButton').on('click', function () {
                renderTable(true); // 重新渲染表格并应用过滤
            });

            // 导出按钮点击事件
            $('#exportExcel').on('click', function () {
                layer.load(2, {
                    shade: [0.3, '#000'] // 设置遮罩层的透明度和颜色
                });

                $.ajax({
                    url: '/export_tara_table',
                    method: 'GET',
                    xhrFields: {
                        responseType: 'blob' // 设置响应类型为blob
                    },
                    success: function (data, status, xhr) {
                        layer.closeAll('loading'); // 关闭加载动画
                        
                        // 从响应头中获取文件名
                        const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                        let filename = 'TARA报告.xlsx'; // 默认文件名
                        
                        if (contentDisposition) {
                            const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
                            if (matches != null && matches[1]) {
                                filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
                            }
                        }
                        
                        // 创建一个临时的URL对象
                        const url = window.URL.createObjectURL(new Blob([data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', filename); // 使用从服务器获取的文件名
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(url);
                    },
                    error: function (xhr, status, error) {
                        layer.closeAll('loading'); // 关闭加载动画
                        layer.msg('导出失败：' + error, {icon: 2});
                    }
                });
            });

            $('#exportWord').on('click', function () {
                layer.load(2, {
                    shade: [0.3, '#000'] // 设置遮罩层
                });

                $.ajax({
                    url: '/export_tara_word',
                    method: 'GET',
                    xhrFields: {
                        responseType: 'blob' // 设置响应类型为blob
                    },
                    success: function (data, status, xhr) {
                        layer.closeAll('loading'); // 关闭加载动画
                        
                        // 从响应头中获取文件名
                        const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                        let filename = 'TARA报告.docx'; // 默认文件名
                        
                        if (contentDisposition) {
                            const matches = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/.exec(contentDisposition);
                            if (matches != null && matches[1]) {
                                filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
                            }
                        }
                        
                        // 创建下载链接
                        const url = window.URL.createObjectURL(new Blob([data]));
                        const link = document.createElement('a');
                        link.href = url;
                        link.setAttribute('download', filename);
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        window.URL.revokeObjectURL(url);
                    },
                    error: function (xhr, status, error) {
                        layer.closeAll('loading'); // 关闭加载动画
                        layer.msg('导出失败：' + error, {icon: 2});
                    }
                });
            });
        });
    </script>
</body>
</html>